<template>
  <span 
    :class="[
      'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
      statusClasses
    ]"
  >
    <svg 
      v-if="showDot" 
      :class="[
        'w-1.5 h-1.5 mr-1.5',
        dotClasses
      ]" 
      fill="currentColor" 
      viewBox="0 0 8 8"
    >
      <circle cx="4" cy="4" r="3" />
    </svg>
    
    <component 
      v-if="icon" 
      :is="icon" 
      class="w-3 h-3 mr-1"
    />
    
    {{ text }}
  </span>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  status: {
    type: String,
    required: true
  },
  text: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'default',
    validator: (value) => {
      return ['success', 'warning', 'danger', 'info', 'default', 'primary'].includes(value)
    }
  },
  showDot: {
    type: Boolean,
    default: false
  },
  icon: {
    type: [String, Object],
    default: null
  }
})

// 状态样式映射
const statusClasses = computed(() => {
  const typeMap = {
    success: 'bg-green-100 text-green-800',
    warning: 'bg-yellow-100 text-yellow-800', 
    danger: 'bg-red-100 text-red-800',
    info: 'bg-blue-100 text-blue-800',
    primary: 'bg-primary-light text-primary',
    default: 'bg-gray-100 text-gray-800'
  }
  
  // 优先使用 type，如果没有则根据 status 推断
  if (props.type !== 'default') {
    return typeMap[props.type]
  }
  
  // 根据常见状态值推断类型
  const statusTypeMap = {
    // 成功状态
    'completed': 'success',
    'success': 'success', 
    'paid': 'success',
    'active': 'success',
    'approved': 'success',
    'published': 'success',
    
    // 警告状态
    'pending': 'warning',
    'waiting': 'warning',
    'unpaid': 'warning',
    'draft': 'warning',
    'reviewing': 'warning',
    
    // 危险状态
    'failed': 'danger',
    'error': 'danger',
    'rejected': 'danger',
    'cancelled': 'danger',
    'overdue': 'danger',
    'disabled': 'danger',
    
    // 信息状态
    'in_progress': 'info',
    'processing': 'info',
    'running': 'info',
    'info': 'info'
  }
  
  const inferredType = statusTypeMap[props.status.toLowerCase()] || 'default'
  return typeMap[inferredType]
})

// 圆点样式
const dotClasses = computed(() => {
  if (!props.showDot) return ''
  
  const dotMap = {
    success: 'text-green-400',
    warning: 'text-yellow-400',
    danger: 'text-red-400', 
    info: 'text-blue-400',
    primary: 'text-primary',
    default: 'text-gray-400'
  }
  
  // 使用与背景相同的逻辑确定圆点颜色
  const type = props.type !== 'default' ? props.type : (() => {
    const statusTypeMap = {
      'completed': 'success',
      'success': 'success',
      'paid': 'success', 
      'active': 'success',
      'approved': 'success',
      'published': 'success',
      'pending': 'warning',
      'waiting': 'warning',
      'unpaid': 'warning',
      'draft': 'warning',
      'reviewing': 'warning',
      'failed': 'danger',
      'error': 'danger',
      'rejected': 'danger',
      'cancelled': 'danger',
      'overdue': 'danger',
      'disabled': 'danger',
      'in_progress': 'info',
      'processing': 'info',
      'running': 'info',
      'info': 'info'
    }
    return statusTypeMap[props.status.toLowerCase()] || 'default'
  })()
  
  return dotMap[type]
})
</script>